<template>
  <a-card style="width:100%;height:89vh">
    <a-card size="small" title="充值账户" :bordered="false"
            :headStyle="{background:'#fff',color:'black',fontWeight:'normal',fontFamily:'itl'}">

      <a-row style="color:black">
        <a-col :span="12">
          <span>账户 : {{ userInfo.realname }}</span>
        </a-col>
        <s-col :span="12">
      <span>
        余额 : ￥{{ userInfo.balance }}
      </span>
        </s-col>
      </a-row>

    </a-card>
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
    >
      <a-card size="small" title="充值方式" :bordered="false"
              style="margin-top: 1px"
              :headStyle="{background:'#fff',color:'black',fontWeight:'normal'}">

        <a-radio-group v-model:value="formState.chargeMode">
          <a-card style="width: 20vw;display: inline-block;margin: 0 2px;cursor:pointer"
                  v-for="item in chargeModeList"
                  :key="item.type" @click="formState.chargeMode=item.type">
            <a-row justify="space-between" align="top">
              <div>
                <a-space>
                  <a-radio :value="item.type"><span>{{ item.title }}</span></a-radio>
                </a-space>
                <div style="color:grey">实时到账</div>
                <div style="color:grey">不支持信用卡</div>
              </div>

              <MyIcon :style="{fontSize: '2.5em' }" :type="item.icon"/>
            </a-row>
          </a-card>

        </a-radio-group>
      </a-card>
      <a-card size="small" title="充值金额" :bordered="false"
              style="margin-top: 1px"
              :headStyle="{background:'#fff',color:'black',fontWeight:'normal'}">

        <a-form-item
          name="balance"
        >
          <a-input v-model:value="formState.balance" :min="1" :step="0.01"
                   placeholder="请填写充值金额" style="width:20vw"/>

        </a-form-item>
      </a-card>
      <a-card size="small" title="" :bordered="false"
              style="margin-top: 1px"
              :headStyle="{background:'#fff',color:'black',fontWeight:'normal'}">

        <a-button type="primary" @click="charge" :loading="chargeBalanceLoading">确认充值</a-button>
      </a-card>
    </a-form>
  </a-card>
</template>

<script lang="ts" name="balance-wlhyBalanceCharge" setup>
import {ref, reactive, toRaw} from 'vue';
import {BasicTable, useTable, TableAction} from '/@/components/Table';
import {useListPage} from '/@/hooks/system/useListPage';
import {columns, superQuerySchema} from './WlhyBalanceIncomeExpance.data';
import {
  list,
  deleteOne,
  batchDelete,
  getImportUrl,
  getExportUrl, chargeBalance
} from './WlhyBalanceIncomeExpance.api';
import {downloadFile} from '/@/utils/common/renderUtils';
import WlhyBalanceIncomeExpanceModal from './components/WlhyBalanceIncomeExpanceModal.vue'
import {useUserStore} from '/@/store/modules/user';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import {getUserInfo} from "@/api/sys/user";
import {UserOutlined} from '@ant-design/icons-vue';


import {MyIcon} from "@/utils/myIcon"
import {Rule} from "ant-design-vue/es/form";

const chargeBalanceLoading = ref(false);
const formRef = ref();
const userInfo = reactive({})
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import { Modal } from 'ant-design-vue';
const chargeModeList = reactive([
  {
    title: "支付宝支付",
    type: "ALI_PC",
    icon: 'icon-zhifubaozhifu'
  },
  {
    title: "微信支付",
    type: "WX_NATIVE",
    icon: 'icon-weixinzhifu'
  },

])

interface FormState {
  balance: number;
  chargeMode: string;
  returnUrl: string;

}

const formState = reactive<FormState>({
  balance: 1,
  chargeMode: 'ALI_PC',
  returnUrl:`http://${window.location.host}/balance/BalanceSuccess`,

});
const rules: Record<string, Rule[]> = {
  balance: [
    {required: true, message: '请填写充值金额', trigger: 'change'},
  ],

};


const charge = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState));
      chargeBalanceLoading.value = true;
      // /balance/BalanceSuccess
      chargeBalance(formState).then(res => {
        console.log("chargeBalance ", res)
        if (res.payData) {
          Modal.confirm({
            title: '充值结果确认',
            // icon: createVNode(ExclamationCircleOutlined),
            // content: 'When clicked the OK button, this dialog will be closed after 1 second',
            okText:"充值成功",
            cancelText:'充值失败',
            onOk() {
              getUserInfo().then(res => {
                Object.assign(userInfo, res.userInfo)
              })
            },
            // eslint-disable-next-line @typescript-eslint/no-empty-function
            onCancel() {},
          });
          window.open(res.payData)
        }
      }).finally(() => {
        chargeBalanceLoading.value = false;
      })
    })
    .catch(error => {
      console.log('error', error);
    });
}
// --- 余额充值
getUserInfo().then(res => {
  Object.assign(userInfo, res.userInfo)
})

</script>

<style lang="less" scoped>

</style>
